<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import ChannelSelect from '@/components/ChannelSelect.vue'
import { articleGetArticleListService } from '@/api/article'
import { formatTime } from '@/utils/format'
const articalList = ref([]) // 文章列表
const total = ref(0) // // 文章总数
const loading = ref(false) // 加载状态
// 渲染参数
const params = ref({
  pagenum: 1, // 当前页码
  pagesize: 5, // 每页显示多少条数据
  cate_id: '',
  state: ''
})

// 获取文章列表
const getArticleList = async () => {
  loading.value = true // 开启加载
  const res = await articleGetArticleListService(params.value)
  articalList.value = res.data.data
  total.value = res.data.total
  loading.value = false // 加载完成
}
getArticleList()
// 编辑功能
const handleEdit = (row) => {
  console.log(row.id)
}
// 删除功能
const handleDelete = (row) => {
  console.log(row)
}
// 分页功能 每一页显示多少条数据
const handleSizeChange = (size) => {
  // 只要每页条数变化，当前访问的当前页码变为1
  // 数据大概率不在当前页面了，从第一页渲染
  params.value.pagenum = 1
  params.value.pagesize = size
  getArticleList()
}
// 分页功能 跳转到第几页
const handleCurrentChange = (page) => {
  params.value.pagenum = page // 更新当前页码
  getArticleList()
}
// 筛选搜索功能
// 按照条件重新检索
const onSearch = () => {
  params.value.pagenum = 1 // 重置页码为1
  getArticleList()
}
// 重置搜索功能
const onReset = () => {
  params.value = {
    pagenum: 1,
    pagesize: 10,
    cate_id: '',
    state: ''
  }
  getArticleList()
}
</script>
<template>
  <page-card title="文章管理">
    <template #extra>
      <el-button type="primary"> 发布文章 </el-button>
    </template>
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="文章分类">
        <!-- 下拉框组件 -->
        <!-- 使用 v-model 绑定 cate_id -->
        <channel-select v-model="params.cate_id"></channel-select>
      </el-form-item>
      <el-form-item label="文章状态">
        <el-select
          v-model="params.state"
          placeholder="请选择"
          style="width: 200px"
        >
          <!-- 状态后台就是依靠状态字段来判断的 -->
          <el-option label="全部" value="全部"></el-option>
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch"> 筛选 </el-button>
        <el-button type="primary" @click="onReset"> 重置 </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="articalList" style="width: 100%">
      <el-table-column prop="title" label="文章标题">
        <template #default="{ row }">
          <el-link type="primary" underline="never">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类"></el-table-column>
      <el-table-column prop="pub_date" label="发布时间">
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column prop="address" label="操作">
        <!-- 作用域插槽获取当前行数据 类似v-for item -->
        <template #default="{ row }">
          <el-button
            type="primary"
            plain
            :icon="Edit"
            @click="handleEdit(row)"
          ></el-button>
          <el-button
            type="danger"
            plain
            :icon="Delete"
            @click="handleDelete(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分也组件 -->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[1, 5, 10, 30, 100]"
      :disabled="false"
      :background="true"
      :pager-count="5"
      layout="jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 30px; justify-content: flex-end"
    />
  </page-card>
</template>
<style scoped></style>
